<template>
  <div class="page page-landing">
    <Header />
    <div class="carousel-bar">
      <el-carousel :interval="5000" arrow="never" height="800px">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item.src" :alt="index" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="product-bar">
      <ul class="product-list">
        <li>
          <div class="box box-product">
            <p>A系统</p>
          </div>
        </li>
        <li>
          <div class="box box-product">
            <p>B系统</p>
          </div>
        </li>
        <li>
          <div class="box box-product">
            <p>C系统</p>
          </div>
        </li>
        <li>
          <div class="box box-product">
            <p>D系统</p>
          </div>
        </li>
      </ul>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from "./components/header";
import Footer from "./components/footer";

export default {
  components: { Footer, Header },
  data() {
    return {
      bannerList: [
        {
          src: "/slider/banner1.jpg"
        },
        {
          src: "/slider/banner2.jpg"
        },
        {
          src: "/slider/banner3.jpg"
        }
      ]
    };
  }
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.product-bar {
  padding: 70px 0;

  .product-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1056px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;

    li {
      width: 22.5%;
    }
  }
}

.box {
  background: #fff;
  height: 160px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 400px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
